<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>报名</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.5.0.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>

        /*变色效果*/
        h1 {
            font-weight: bold;
            text-align: center;
            background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
            -webkit-background-clip: text;
            background-clip: revert;
            -webkit-text-fill-color: transparent;
            background-size: 200% 100%;
            animation: bganimate 5s infinite linear;
            font-size: 30px;
        }

        @keyframes bganimate {
            100% {
                background-position: -100% 100%;
            }
        }
    </style>
    <script>
        function checkProjectName() {
            let $inputProjectName = $("#inputProjectName");
            let projectName = $inputProjectName.val();
            let reg = /^\S+/;
            let flag = reg.test(projectName);
            if (flag) {
                $inputProjectName.css("border", "1px solid green");
            } else {
                $inputProjectName.css("border", "1px solid red");
            }
            return flag;
        }

        function checkStudentId() {
            let $inputStudentId = $("#inputStudentId");
            let studentId = $inputStudentId.val();
            let reg = /^[1-9][0-9]+/;
            let flag = reg.test(studentId);
            if (flag) {
                $inputStudentId.css("border", "1px solid green");
            } else {
                $inputStudentId.css("border", "1px solid red");
            }
            return flag;
        }

        function checkStudentName() {
            let $inputStudentName = $("#inputStudentName");
            let studentName = $inputStudentName.val();
            let reg = /\S+/;
            let flag = reg.test(studentName);
            if (flag) {
                $inputStudentName.css("border", "1px solid green");
            } else {
                $inputStudentName.css("border", "1px solid red");
            }
            return flag;
        }

        $(function () {
            $("#submit").click(function () {
                let params = $("#signUpForm").serialize();
                if (checkStudentId() && checkProjectName() && checkStudentName()) {
                    $.get("signUpServlet", params, function (json) {
                        let $submit = $("#submit");
                        if (json.msg === "success") {
                            $submit.attr("class", "btn btn-success col-md-offset-4 col-md-4");
                            $submit.html("报名成功");
                        } else {
                            $submit.attr("class", "btn btn-danger col-md-offset-4 col-md-4");
                            $submit.html("失败");
                        }
                    }, "json");
                }

            });
            $("#inputStudentId").blur(checkStudentId);
            $("#inputStudentName").blur(checkStudentName);
            $("#inputProjectName").blur(checkProjectName);
        });

    </script>

</head>
<body>
<h1>Sign Up Now</h1>
<form id="signUpForm" method="get" action="">
    <div class="form-group col-md-offset-4 col-md-4" style="padding-top: 50px">
        <label for="inputStudentId">学号</label>
        <input type="text" class="form-control" id="inputStudentId" name="studentId" placeholder="学号">
    </div>
    <div class="form-group col-md-offset-4 col-md-4">
        <label for="inputStudentName">姓名</label>
        <input type="text" class="form-control" id="inputStudentName" name="studentName" placeholder="姓名">
    </div>
    <div class="form-group col-md-offset-4 col-md-4">
        <label for="inputProjectName">项目名称</label>
        <input type="text" class="form-control" id="inputProjectName" name="projectName" placeholder="项目名称">
    </div>
    <button id="submit" type="button" class="btn btn-primary col-md-offset-4 col-md-4">提交</button>
</form>
</body>
</html>